<template>
	<view>
		<view style="margin: 10px; padding: 15px 10px 15px 10px; background-color: #f5fff0; border-radius: 10px;">
			<!-- 宝贝拥有用户信息 -->
			<view style="margin-bottom: 30px;display: flex;">
				<!-- 头像 -->
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="u-page__image-item">
							<u--image shape="circle" :src="pageOwner.icon" width="50px" height="50px"></u--image>
						</view>
					</view>
				</view>

				<!-- 用户信息 -->
				<view>
					<view style="margin-left: 20px;">
						<text style="font-size: 20px; font-weight: bold;">{{pageOwner.nickName}}</text>
					</view>
					<view style="margin-left: 22px;">
						<text style="font-size: 15px;">发布于: {{good.address}}</text>
					</view>
				</view>
			</view>

			<!-- 宝贝价格&宝贝使用情况 -->
			<view style="margin-bottom: 10px;">
				<view>
					<text style="color: #e45656; font-weight: bold; font-size: 18px;">￥</text>
					<text style="color: #e45656; font-weight: bold; font-size: 30px;">{{good.price}}</text>
					<view style="float: right; border-bottom: 3px solid #5ac725;">
						<text
							style="color: #303030; font-weight: bold; font-size: 15px; line-height: 30px;">{{good.status}}</text>
					</view>
				</view>
			</view>


			<!-- 宝贝提货方式 -->
			<view style="margin-bottom: 30px;">
				<view style="display: flex;">
					<view style="display: flex; margin-right: 15px;">
						<image v-if="good.mode1" :src="gou" style="width: 25px; height: 25px;"></image>
						<image v-else :src="cha" style="width: 25px; height: 25px;"></image>
						<u--text mode="text" text="买家自提" size="14" bold color="#303030"></u--text>
					</view>
					<view style="display: flex; margin-right: 15px;">
						<image v-if="good.mode2" :src="gou" style="width: 25px; height: 25px;"></image>
						<image v-else :src="cha" style="width: 25px; height: 25px;"></image>
						<u--text mode="text" text="送货上门" size="14" bold color="#303030"></u--text>
					</view>
					<view style="display: flex; margin-right: 15px;">
						<image v-if="good.mode3" :src="gou" style="width: 25px; height: 25px;"></image>
						<image v-else :src="cha" style="width: 25px; height: 25px;"></image>
						<u--text mode="text" text="快递邮寄" size="14" bold color="#303030"></u--text>
					</view>
				</view>
			</view>

			<!-- 宝贝描述&图片 -->
			<view>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="album">
							<view class="album__content">
								<view :style="{
									marginBottom: '20px',
									width: albumWidth + 'px'
								}">
									<u--text :text="good.description" :customStyle="{
											width: albumWidth + 'px'
										}" size="16" color="#303030"></u--text>
								</view>
								<u-album :urls="urls" @albumWidth="width => albumWidth = width" multipleSize="160"
									maxCount="4" rowCount="2"></u-album>
							</view>
						</view>
					</view>
				</view>


			</view>

		</view>

		<!-- 评论区 -->
		<template v-for="(message, index1) in goodMessages">
			<view style="margin:10px; padding: 15px 10px 5px 10px; background-color: #f4f4f5; border-radius: 10px;">
				<!-- 评论用户信息 -->
				<view style="display: flex;">
					<!-- 头像 -->
					<view class="u-demo-block">
						<view class="u-demo-block__content">
							<view class="u-page__image-item">
								<u--image shape="circle" :src="message.icon" width="45px" height="45px"></u--image>
							</view>
						</view>
					</view>

					<!-- 评论区 -->
					<view>
						<!-- 用户信息 -->
						<view @click="messageBarShow('子留言', message)">
							<view style="display: flex;">
								<view style="margin-left: 20px;">
									<text style="font-size: 16px; font-weight: bold;">{{message.nickName}}</text>
								</view>
								<view style="margin-left: 10px;">
									<text style="font-size: 12px; line-height: 26px;">{{message.date}}</text>
								</view>
							</view>
							<!-- 用户评论 -->
							<view style="margin-left: 20px; margin-bottom: 10px;">
								<text style="font-size: 16px;">{{message.text}}</text>
							</view>
						</view>

						<!-- 楼中楼 -->
						<template v-if="message.sonMessages.length > 0">
							<template v-for="(sonMessage, index2) in message.sonMessages">
								<!-- 评论用户信息 -->
								<view style="display: flex;">
									<!-- 头像 -->
									<view class="u-demo-block">
										<view class="u-demo-block__content">
											<view class="u-page__image-item">
												<u--image shape="circle" :src="sonMessage.icon" width="30px"
													height="30px"></u--image>
											</view>
										</view>
									</view>

									<!-- 评论区 -->
									<view @click="messageBarShow('回复', sonMessage)">
										<!-- 用户信息 -->
										<view style="display: flex;">
											<view style="margin-left: 15px;">
												<text
													style="font-size: 14px; font-weight: bold;">{{sonMessage.nickName}}</text>
												<template v-if="sonMessage.sendType === '回复'">
													<text style="font-size: 12px; margin: 0 5px 0 5px;">回复</text>
													<text
														style="font-size: 14px; font-weight: bold;">{{sonMessage.sendToUserNickName}}</text>
												</template>

											</view>
											<view style="margin-left: 10px;">
												<text
													style="font-size: 12px; line-height: 22px;">{{sonMessage.date}}</text>
											</view>
										</view>
										<!-- 用户评论 -->
										<view style="margin-left: 15px; margin-bottom: 10px;">
											<text style="font-size: 14px;">{{sonMessage.text}}</text>
										</view>
									</view>
								</view>
							</template>
						</template>

					</view>

				</view>



			</view>
		</template>

		<view style="width: 100%; height: 140px; text-align: center;">
			<text style="line-height: 80px;">没有更多了 ~ </text>
		</view>

		<!-- 吸底框 -->
		<view
			style="position: fixed; right: 0; bottom: 0; z-index: 99;width: 100%; height: 80px; background-color: white;">
			<view style="padding: 10px 20px 10px 20px;">
				<view v-if="chatShow == 'false'">
					<!-- 评论 -->
					<view style="float: left; margin:5px 15px 5px 10px" @click="messageBarShow('父留言')">
						<image :src="chat" style="width: 40px; height: 40px;"></image>
					</view>

					<!-- 收藏 -->
					<view @click="pointFavorite" style="float: left; margin:5px 15px 5px 10px">
						<image v-if="user.goodFavorite == 'false'" :src="star" style="width: 40px; height: 40px;"></image>
						<image v-else :src="starFill" style="width: 40px; height: 40px;"></image>
					</view>

					<!-- 私信 -->
					<view style="float: right; margin-top: 0px;">
						<!-- 用户为宝贝发布者 显示管理按钮 -->
						<u-button v-if="user.id == pageOwner.id" @tap="manageBarOpenSheet"  text="管理页面" type="success" size="large" shape="circle"></u-button>
						<!-- 宝贝如果已售出 显示已售出 -->
						<u-button v-else-if="good.sold_out == 'true'"
						    disabled
						    text="宝贝已售出"
						    size="large"
							shape="circle"
						    type="success"
						></u-button>
						<!-- 未售出则显示联系TA -->
						<u-button v-else @click="toLianXiTA()" icon="weixin-fill" text="联系TA" type="success" size="large" shape="circle"></u-button>
					</view>
					
					<u-action-sheet
						:show="manageBarShow"
						@select="selectOption"
						@close="manageBarShow = false"
						:actions="manageBarActions"
						cancelText="取消"
					>
					</u-action-sheet>
					
				</view>

				<view v-else>
					<view style="float: left; margin:5px 15px 5px 10px" @click="messageBarShow('重置')">
						<image :src="chatFill" style="width: 40px; height: 40px;"></image>
					</view>

					<view>
						<view class="u-demo-block__content" style="margin-top: 0px;">
							<!-- 注意：由于兼容性，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input :placeholder="messageBarText" v-model="messageToSend.message" shape="circle">
							<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input :placeholder="messageBarText" v-model="messageToSend.message" shape="circle">
								<!-- #endif -->
									<template slot="suffix">
										<u-button @tap="writeMessage" text="留言" type="success" size="normal"
											shape="circle"></u-button>
									</template>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
					</view>

				</view>

			</view>

		</view>
		
		<!-- 评论框蒙版 -->
		<view v-if="chatShow == 'true'" @click="messageBarShow('隐藏')">
			<view style="width: 100%; height: 100%;position: fixed; top: 0;"></view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageId: '',
				chatShow: 'false',
				manageBarShow: false,
				manageBarActions: [{
						name: '编辑宝贝',
					},
					{
						name: '删除宝贝',
					},
				],
				gou: getApp().globalData.img_url + 'img%2Flogo%2Ftrue.png',
				cha: getApp().globalData.img_url + 'img%2Flogo%2Ffalse.png',
				star: getApp().globalData.img_url + 'img%2Flogo%2Fstar.png',
				starFill: getApp().globalData.img_url + 'img%2Flogo%2Fstar-fill.png',
				chat: getApp().globalData.img_url + 'img%2Flogo%2Fchat.png',
				chatFill: getApp().globalData.img_url + 'img%2Flogo%2Fchat-fill.png',
				chat2: getApp().globalData.img_url + 'img%2Flogo%2Fchat2.png',
				icon1: '',
				messageToSend: {
					fatherNo: '',
					message: '',
					messageSendToId: '',
					messageSendToNickName: '',
					messageSendType: '',
				},
				messageBarText: '看对眼就留言~',
				pageOwner: {},
				user: {},
				good: {},
				goodImg: [],
				albumWidth: 0,
				urls: [], // 图片库
				goodMessages: []

			}
		},
		methods: {
			// 跳转至联系TA
			toLianXiTA() {
				uni.navigateTo({
					url: '/pages/4_MessagePage/LianXiTA/LianXiTA?Tid=' + this.pageOwner.id + '&Gid=' + this.good.id
				})
			},
			// 根据id获取宝贝详情及图片
			getGoodInfo() {
				let that = this;
				uni.request({
					method: 'GET',
					url: getApp().globalData.url + '/good/getGoodInfo?goodId=' + this.pageId,
					success(res) {
						// console.log(res)
						that.good = res.data.good;
						that.goodImg = res.data.goodImg;
						that.goodMessages = res.data.goodMessages;
						that.urlsPush();
						
					}
				})
			},
			// 向相册塞入图片
			urlsPush() {
				let length = this.goodImg.length;
				for (let i = 0; i < length; i++) {
					this.urls.push(this.goodImg[i].src);
				}
			},
			// 标记收藏
			pointFavorite() {
				if (this.user.goodFavorite == "false") {
					this.user.goodFavorite = "true";
				} else {
					this.user.goodFavorite = "false";
				}
				
			},
			// 管理页面按钮上拉菜单显示/隐藏
			manageBarOpenSheet() {
				this.manageBarShow = true;
			},
			// 上拉菜单选择
			selectOption(e) {
				console.log(e.name)
			},
			// 留言框显示/隐藏
			messageBarShow(messageType, message) {
				if (messageType == "父留言") { // 给宝贝用户留言
					this.messageToSend.fatherNo = "0";
					this.messageToSend.message = '';
					this.messageToSend.messageSendToId = this.pageOwner.id;
					this.messageToSend.messageSendToNickName = this.pageOwner.nickName;
					this.messageToSend.messageSendType = "留言";

					this.chatShow = "true";
				} else if (messageType == "子留言") { // 给留言用户留言
					this.messageToSend.fatherNo = message.no;
					this.messageToSend.message = '';
					this.messageToSend.messageSendToId = message.userId;
					this.messageToSend.messageSendToNickName = message.nickName;
					this.messageToSend.messageSendType = "留言";

					this.messageBarText = "留言给" + message.nickName;
					this.chatShow = "true";
				} else if (messageType == "回复") { // 回复留言用户
					this.messageToSend.fatherNo = message.fatherNo;
					this.messageToSend.message = '';
					this.messageToSend.messageSendToId = message.userId;
					this.messageToSend.messageSendToNickName = message.nickName;
					this.messageToSend.messageSendType = "回复";

					this.messageBarText = "回复" + message.nickName;
					this.chatShow = "true";
				} else {
					this.messageToSend.fatherNo = "0";
					this.messageToSend.message = '';
					this.messageToSend.messageSendToId = this.pageOwner.id;
					this.messageToSend.messageSendToNickName = this.pageOwner.nickName;
					this.messageToSend.messageSendType = "留言";

					this.messageBarText = "看对眼就留言~";
					this.chatShow = "false";
				}

				// console.log(messageType)
			},
			// 留言
			writeMessage() {
				if (this.messageToSend.message == '' || this.messageToSend.message == null) {
					console.log("文本不能为空！")
				} else {
					// 子留言有 sonMessages: []
					if (this.messageToSend.fatherNo == "0") {
						let tempMessage = {
							no: '', //填入数据库自动获取
							fatherNo: this.messageToSend.fatherNo,
							userId: this.user.id,
							icon: this.user.icon,
							nickName: this.user.nickName,
							date: this.getDate(),
							text: this.messageToSend.message,
							sendType: this.messageToSend.messageSendType,
							sendToUserId: this.messageToSend.messageSendToId,
							sendToUserNickName: this.messageToSend.messageSendToNickName,
							messageChecked: 'false',
							sonMessages: []
						};
						// this.goodMessages.push(tempMessage);
						
						// 提交留言到后端
						let that = this;
						uni.request({
							method: 'POST',
							url: getApp().globalData.url + '/good/sendGoodMessage',
							data: {
								goodId: this.good.id,
								message: tempMessage
							},
							success(res) {
								that.goodMessages.push(res.data.message);
								// console.log(res.data)
								uni.showToast({
									icon: 'none',
									title: '发送成功'
								})
							}
						})
						
					} else { // 回复区
						let tempMessage = {
							no: '', //填入数据库自动获取
							fatherNo: this.messageToSend.fatherNo,
							userId: this.user.id,
							icon: this.user.icon,
							nickName: this.user.nickName,
							date: this.getDate(),
							text: this.messageToSend.message,
							sendType: this.messageToSend.messageSendType,
							sendToUserId: this.messageToSend.messageSendToId,
							sendToUserNickName: this.messageToSend.messageSendToNickName,
							messageChecked: 'false'
						};
						for (let i = 0; i < this.goodMessages.length; i++) {
							if (this.goodMessages[i].no == tempMessage.fatherNo) {
								// this.goodMessages[i].sonMessages.push(tempMessage)
								// 提交留言到后端
								let that = this;
								uni.request({
									method: 'POST',
									url: getApp().globalData.url + '/good/sendGoodMessage',
									data: {
										goodId: this.good.id,
										message: tempMessage
									},
									success(res) {
										that.goodMessages[i].sonMessages.push(res.data.message);
										// console.log(res.data)
										uni.showToast({
											icon: 'none',
											title: '发送成功'
										})
									}
								})
								
								break;
							}
						}
						
					}

					// 留言后关闭输入框
					this.chatShow = "false";
				}

			},
			// 获取当前时间
			getDate() {
				const currentTime = new Date();
				const year = currentTime.getFullYear();
				const month = currentTime.getMonth() + 1; // 月份从0开始，因此需要加1
				const day = currentTime.getDate();
				const hours = currentTime.getHours();
				const minutes = currentTime.getMinutes();
				const seconds = currentTime.getSeconds();
				let hour = hours < 10 ? ("0" + hours) : hours;
				let minute = minutes < 10 ? ("0" + minutes) : minutes;
				let second = seconds < 10 ? ("0" + seconds) : seconds;
				// console.log(year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second);
				return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
			}

		},
		onLoad: function(option) {
			this.pageId = option.goodId;
			// 获取用户信息
			let that = this;
			uni.getStorage({
				key: 'user',
				success(res) {
					that.user = res.data;
				}
			});
			// 获取pageOwner信息
			uni.request({
				method: 'GET',
				url: getApp().globalData.url + '/user/getPageOwnerInfoByGoodId?goodId=' + that.pageId,
				success(res) {
					that.pageOwner = res.data;
					console.log(that.pageOwner)
				}
			})
			
			// console.log(this.userId)
			this.getGoodInfo();

			this.messageSendToId = this.pageOwner.id;
			this.messageSendToNickName = this.pageOwner.nickName;
		}
	}
</script>

<style>

</style>